<template>
  <div class="container">
    <DataList
      ref="dataList"
      :propAutoFetchData="false"
      :propNoCheck="true"
      :propSearchFields="['code']"
      :propSearchTextAppend="'发货单号/采购单号'"
      propUrl="/order/deliverys/pageCommon"
      showFieldPk="id"
      :showFieldList="cpShowFieldList"
      :vanFieldLabelWith5="true"
      @click="itemClick"
      @afterLoad="afterLoad"
      :sortDefault="{field: 'gmtCreate',type: 'desc'}"
    >
    </DataList>

    <!--发货详情-->
    <customDrawer  title="发货详情" ref="customDrawerOrder" :autoHide="false" p94Only placement="right" :footer="null">
      <template #content>
<!--
        <customSpace fullWidth style="top: 33px;padding: 5px 0px; position: fixed; top: 33px;  z-index: 999;
    background: #fff;"
           v-if="['1','2'].includes(form.status)"
        >
          <template #content>
            <customButton  title="打印" theme="success" size="medium" @click="printForm"  />
          </template>
        </customSpace>
-->

        <div id="box-base" class="box-title" >发货信息</div>
        <customForm :data="form"   ref="editForm" :disabled="true" layoutMini>
          <template #content>
            <customFormItem
              v-for="item in cpFormFieldList"  :key="item.name"
              :parent="_self" :form="form"
              :label="item.label" :name="item.name"  :type="item.queryType"
              :config="item.queryConfig"
              :full-width="24 == item.span"
            />
          </template>
        </customForm>

        <div id="box-dtl" class="box-title">发货明细</div>
        <DataList
          ref="dataListDtl"
          :propAutoFetchData="false"
          :propNoCheck="true"
          :propSearchFields="['materialName','materialSpec']"
          :propSearchTextAppend="'品名、品规'"
          propUrl="/order/delivery_items/pageCommon"
          showFieldPk="id"
          :showFieldList="cpItemShowFieldDtlList"
          :vanFieldLabelWith5="true"
          :sortDefault="{field: 'gmtCreate',type: 'desc'}"
        >
        </DataList>
      </template>
    </customDrawer>
  </div>
</template>

<script>
import utilPrint from '@/util/utilPrint.js'

export default {
  help: '采购订单-列表',
  props:['statusEq', 'readonly'],
  data() {
    return {
      poCode: '',
      form: {},
    }
  },
  computed: {

    isReadonly() {
      return true == this.readonly
    },

    // 表单字段
    cpFormFieldList() {
      return this.cpShowFieldList.filter(item1 => !item1.showDisabled)
    },

    // 主单据显示字段
    cpShowFieldList() {
      let fieldList = [
        { label: '发货单号', name: 'code', span: 24, isTitle: true },
        { label: '采购单号', name: 'poCode', span: 24 },
        {
          label: '发货状态', name: 'status', span: 24,
          queryType: this.constCommon.formItemType.selectDict.name,
          queryConfig: {
            dictType: this.constCommon.dictType.orderDeliveryStatus,
            multiple: true
          },
          isTitleSub: true
        },
        {
          label: '发货金额',
          name: 'deliveryAmount',
          span: 12,
          filterDisabled: true,
          sortDisabled: true
        },
        {
          label: '寄售', name: 'isConsignment', span: 12, flagBoolean: true,
          queryType: this.constCommon.formItemType.switch.name,
          queryConfig: {
            dictType: this.constCommon.dictType.commonYesNo
          }
        },
        {
          label: '标签管理', name: 'isOneThingOneYard', span: 12, flagBoolean: true,
          queryType: this.constCommon.formItemType.switch.name,
          queryConfig: {
            dictType: this.constCommon.dictType.commonYesNo
          }
        },
        {
          label: '已关闭', name: 'isClosed', span: 12, sortDisabled: true, flagBoolean: true,
          queryType: this.constCommon.formItemType.switch.name,
          queryConfig: {
            dictType: this.constCommon.dictType.commonYesNo
          }
        },
        {
          label: '送货地点',
          name: 'warehouseName',
          span: 24,
          showFormDtlDisabled: true,
          filterDisabled: true,
          sortDisabled: true
        },
        {
          label: '创建时间',
          name: 'gmtCreate',
          span: 24,
          queryType: this.constCommon.formItemType.datePickerBetween.name
        },
        {
          label: '发货时间',
          name: 'gmtDelivery',
          span: 24,
          queryType: this.constCommon.formItemType.datePickerBetween.name
        },
        {
          label: '关闭原因',
          name: 'closedReason',
          span: 24,
          filterDisabled: true,
          sortDisabled: true,
          showFormDtlDisabled: true
        },
        {
          label: '备注',
          name: 'remark',
          span: 24,
          filterDisabled: true,
          sortDisabled: true,
          showFormDtlDisabled: true
        }
      ]
      fieldList = [...fieldList, ...this.constCommon.filterCommon.spAndHp()]
      return fieldList
    },

    // 明细列表
    cpItemShowFieldDtlList() {
      let fieldList = [
        { label: '品名', name: 'materialName', span: 24, isTitle: true },
        { label: '品规', name: 'materialSpec', span: 24 },
        {
          label: '右侧信息', name: 'shouldDeliveryQty', span: 12,
          filterDisabled: true,
          sortDisabled: true,
          isTitleSub: true,
          fmtFun: (value, row) => {
            let msg = `<span style="background-color: #be5a00; color: #fff;padding: 3px;font-size: 12px;">应发${row.shouldDeliveryQty}</span>
                      <span style="background-color: #008858; color: #fff;padding: 3px;font-size: 12px;">已发${row.deliveryNumber}</span>
              `
            return msg
          }
        },
        {label:'订单单位',name:'unit',span:12,filterDisabled: true,sortDisabled: true},
        {label:'发货单位',name:'orderUnit',span:12,filterDisabled: true,sortDisabled: true},
        {label:'单价',name:'price',span:12,filterDisabled: true,sortDisabled: true},
        {label:'批次',name:'lot',span:12},
        {label:'生产日期',name:'productionDate',span:12,queryType: this.constCommon.formItemType.datePicker.name,filterDisabled: true,},
        {label:'有效日期',name:'expiredDate',span:12,queryType: this.constCommon.formItemType.datePicker.name,filterDisabled: true,},
        {label:'灭菌日期',name:'sterilizationDate',span:12,filterDisabled: true,sortDisabled: true},
        {label:'小计',name:'subtotalAmount',span:12,filterDisabled: true,sortDisabled: true},

        {label:'注册证号',name:'certificateNo',span:24},
        {label:'商品原厂码',name:'udi',span:24},
        {label:'中标号',name:'bidNo',span:24},
        {label:'厂家序号',name:'mfgSn',span:24},
        {label:'厂商名称',name:'manufacturerName',span:24},

        {label:'备注',name:'remark',span:24,filterDisabled: true,sortDisabled: true},
        {label:'创建时间',name:'gmtCreate',span:24,queryType: this.constCommon.formItemType.datePickerBetween.name,},
      ]
      return fieldList
    }
  },
  mounted() {
    this.loadOrder()
  },
  methods: {
    loadOrder() {
      let wrapper = this.$newWrapper()
      if (this.statusEq) {
        wrapper.eq('status', this.statusEq)
      }
      wrapper.orderByDesc('gmt_create')
      this.$refs.dataList.setQueryWrapper(wrapper)
    },
    itemClick(item) {
      this.form = item
      let wrapper = this.$newWrapper()
      wrapper.eq('deliveryId', this.form.id)
      this.$refs.dataListDtl.setQueryWrapper(wrapper)
      this.$refs.customDrawerOrder.show()
    },


    // 订单数据加载完
    afterLoad(data) {
      if (this.poCode) {
        if (!data || data.length ==0) {
          this.utilMessage.warning(`未找到符合条件的发货订单[${this.poCode}]`)
          return
        }
        if (data[0].code != this.poCode) {
          return
        }
        this.poCode = ''
        this.itemClick(data[0])
      }
    },
    // 打印
    printForm() {
      utilPrint.openPdfView(`打印送货单-${this.form.code}`, `/order/deliverys/${this.form.id}/pdf-preview`)
    }
  },
  watch: {
    '$route.meta.poCode': {
      immediate: true,
      handler(newVal) {
        if (!newVal) {
          return
        }

        this.$nextTick(() => {
          this.poCode = newVal
          delete this.$route.meta.poCode
          const wrapper = this.$newWrapper().eq('code', this.poCode)
          this.$refs.dataList.setQueryWrapper(wrapper)
        })
      }
    }
  }
}
</script>
